<template>
  <div class="portal-outer">
    <div class="portal-main clearfix">
      <div class="user-card">
        <h2 class="username">1120968952</h2>
        <p class="tip">下午好～</p>
        <router-link
          to="/user/account"
          class="link">
          修改个人信息 &gt;
        </router-link>
        <img
          src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/f790b51a76afd7b41522048fa779d69d.jpg"
          width="150"
          height="150"
          class="avatar" />
      </div>
      <div class="user-actions">
        <div class="action-list">
          <ul class="action-list">
            <li>
              绑定手机：
              <span>
                <span class="tel">137******17</span>
              </span>
            </li>
            <li>
              绑定邮箱：
              <span>
                <span class="tel"></span>
                未绑定
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="portal-sub">
      <ul class="info-list clearfix">
        <li>
          <h3>
            待支付的订单：
            <span class="num">0</span>
          </h3>
          <router-link :to="{ name: 'orderList', query: { type: 1 } }">
            查看待支付订单
            <i class="iconfont">></i>
          </router-link>
          <img
            src="//s01.mifile.cn/i/user/portal-icon-1.png"
            alt="" />
        </li>
        <li>
          <h3>
            待收货的订单：
            <span class="num">0</span>
          </h3>
          <router-link :to="{ name: 'orderList', query: { type: 3 } }">
            查看待收货订单
            <i class="iconfont">></i>
          </router-link>
          <img
            src="//s01.mifile.cn/i/user/portal-icon-2.png"
            alt="" />
        </li>
        <li>
          <h3>
            待评价商品数：
            <span class="num">0</span>
          </h3>
          <a href="//www.mi.com/shop/user/comment">
            查看待评价商品
            <i class="iconfont">></i>
          </a>
          <img
            src="//s01.mifile.cn/i/user/portal-icon-3.png"
            alt="" />
        </li>
        <li>
          <h3>
            喜欢的商品：
            <span class="num">0</span>
          </h3>
          <a href="//www.mi.com/shop/user/favorite">
            查看喜欢的商品
            <i class="iconfont">></i>
          </a>
          <img
            src="//s01.mifile.cn/i/user/portal-icon-4.png"
            alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.portal-outer {
  .portal-main {
    padding-top: 24px;
    .user-card {
      position: relative;
      float: left;
      width: 302px;
      height: 160px;
      padding-left: 180px;
      padding-top: 40px;
      .username {
        margin: 0;
        font-size: 24px;
        font-weight: 400;
        color: #616161;
      }
      .tip {
        margin: 0 0 10px;
        color: #b0b0b0;
      }
      .link {
        font-size: 12px;
        color: #ff6700;
      }
      .avatar {
        position: absolute;
        left: 0;
        top: 0;
        padding: 4px;
        border: 1px solid #e0e0e0;
        border-radius: 150px;
      }
    }
    .user-actions {
      float: right;
      width: 358px;
      margin-top: 35px;
      .action-list {
        color: #757575;
        li {
          position: relative;
          padding: 6px 0;
        }
      }
    }
  }
  .portal-sub {
    border-top: 1px solid #e0e0e0;
    .info-list {
      padding: 60px 0 0;
      color: #757575;
      li {
        position: relative;
        float: left;
        width: 276px;
        height: 65px;
        padding-left: 112px;
        padding-top: 15px;
        margin-left: 14px;
        margin-bottom: 80px;
        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 400;
          .num {
            color: #ff6700;
          }
        }
        a {
          .iconfont {
            font-size: 16px;
            line-height: 16px;
            vertical-align: -1px;
          }
        }
        img {
          position: absolute;
          left: -10px;
          top: -10px;
        }
      }
    }
  }
}
</style>
